<template>
  <view class="about-page">
    <!-- 应用信息 -->
    <view class="app-card">
      <image class="logo" src="/static/logo.png" />
      <view class="info">
        <text class="name">荔枝优选</text>
        <text class="version">版本号 v1.0.0</text>
      </view>
    </view>

    <!-- 信息列表 -->
    <uni-list class="info-list">
      <uni-list-item title="用户协议" showArrow @click="navigateToAgreement" />
      <uni-list-item title="隐私政策" showArrow @click="navigateToPrivacy" />
      <uni-list-item title="官方网站" showArrow @click="openWebsite" />
      <uni-list-item title="联系我们" :note="contactInfo" showArrow @click="handleContact" />
    </uni-list>

    <!-- 版权信息 -->
    <view class="copyright">©2023 荔枝优选 All Rights Reserved</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contactInfo: '客服电话: 400-800-1234\n服务时间: 9:00-18:00'
    }
  },
  methods: {
    navigateToAgreement() {
      uni.navigateTo({ url: '/pages/webview?type=agreement' })
    },
    navigateToPrivacy() {
      uni.navigateTo({ url: '/pages/webview?type=privacy' })
    },
    openWebsite() {
      uni.navigateTo({ url: '/pages/webview?url=https://www.example.com' })
    },
    handleContact() {
      uni.makePhoneCall({ phoneNumber: '4008001234' })
    }
  }
}
</script>

<style lang="scss">
.about-page {
  padding: 30upx;
  min-height: 100vh;
  background: #f5f5f5;

  .app-card {
    background: #fff;
    padding: 40upx;
    border-radius: 20upx;
    display: flex;
    align-items: center;
    margin-bottom: 30upx;

    .logo {
      width: 120upx;
      height: 120upx;
      margin-right: 30upx;
    }

    .info {
      display: flex;
      flex-direction: column;

      .name {
        font-size: 36upx;
        font-weight: bold;
        margin-bottom: 10upx;
      }

      .version {
        font-size: 28upx;
        color: #666;
      }
    }
  }

  .info-list {
    margin-bottom: 50upx;
    border-radius: 20upx;
    overflow: hidden;
  }

  .copyright {
    text-align: center;
    font-size: 24upx;
    color: #999;
    padding: 30upx;
  }
}
</style>
